<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org/">
<head th:replace="common/commonSrc :: commonHead(~{::title},~{::link},~{})">
    <title>修改密码</title>
    <link rel="stylesheet" href="/alert/message.css">
    <link rel="stylesheet" href="/loginFrom/loginFrom.css">
</head>
<body>
<div th:replace="common/commonSrc :: commonContent"></div>

<div class="htmleaf-container"
     style="width: 100%;height: 100%;margin: 0;padding: 0;animation: bgLoad 2s;animation-fill-mode: forwards;">
    <div id="wrapper" class="login-page" style="left: 2%;position:relative;">
        <div id="login_form" class="form">


            <form class="login_form" id="zhFrom">
                <label for="password"></label><input type="password" placeholder="新密码(6-18位数字字母)" value=""
                                                     id="password"/>
                <label for="passwordConfirm"></label><input type="password" placeholder="确认密码"
                                                            id="passwordConfirm"/>
                <button class="fromButton" id="modifyPassword">确认修改</button>

            </form>

            <div class="message-from" style="display: none" id="successFrom">
                <p class="message">修改成功</p>
            </div>
        </div>
    </div>
</div>
<span style="display: none" id="userName" th:text="${userName}"></span>
<span style="display: none" id="checkOk" th:text="${checkOk}"></span>
<span style="display: none" id="uuid" th:text="${uuid}"></span>

<nav th:replace="common/commonSrc :: commonNavFoot(~{})"></nav>
</body>
<div th:replace="common/commonSrc :: commonFoot(~{::script})">
    <script type="text/javascript" th:src="@{/alert/message.js}"></script>
    <script type="text/javascript">
        //加载Live2d
        loadlive2d("live2d", "/live2d/model/13.json");

        $(function () {
            if ($("#checkOk").text() === "false") {
                //链接过期
                $("#zhFrom").css("display", "none");
                const successFrom = $("#successFrom");
                successFrom.text('链接已过期');
                successFrom.css({
                    "display": "block",
                    "font-size": "20px",
                    "color": "#94552c",
                    "font-weight": "bold"
                });
                let $loginForm = $("#login_form");
                $loginForm.css("background","url('/images/background/middleGui.png') no-repeat")
                $loginForm.css("background-size","100% 100%")
            }
            $("#modifyPassword").click(function () {
                check_modify();
                return false;
            });
            $('.message a').click(function () {
                $('form').animate({
                    height: 'toggle',
                    opacity: 'toggle'
                }, 'slow');
            });
        })

        function check_modify() {

            let password = $("#password");
            if (!/^[a-zA-Z]\w{5,17}$/.test(password.val())) {
                wrongMessage("密码必须是6-18位数字和字母", password);
                return;
            }

            let passwordConfirm = $("#passwordConfirm");
            if (passwordConfirm.val() !== password.val()) {
                wrongMessage("两次密码输入不一致", passwordConfirm);
                return;
            }

            $.ajax({
                type: 'POST',
                url: getRootPath() + '/modifyPassword',
                data: {
                    userName: $("#userName").text(),
                    newPassword: password.val(),
                    uuid: $("#uuid").text()
                },
                beforeSend: function () {
                    showModal(true);
                },
                complete: function () {
                    showModal();
                },
                success: function (res) {
                    res = JSON.parse(res);
                    if (res.code === "1") {
                        $("#zhFrom").css("display", "none");
                        const successFrom = $("#successFrom");
                        successFrom.text('修改成功');
                        successFrom.css({
                            "display": "block",
                            "font-size": "20px",
                            "color": "#24943d",
                            "font-weight": "bold"
                        });
                        $.message({
                            message: '修改成功'
                        });
                        let $loginForm = $("#login_form");
                        $loginForm.css("background","url('/images/background/middleGui.png') no-repeat")
                        $loginForm.css("background-size","100% 100%")
                    } else {
                        let returnMessage = res.message;
                        let dhIndex = returnMessage.indexOf(",");
                        if (dhIndex !== -1) {
                            let showMessage = returnMessage.substring(0, dhIndex);
                            let pick$ = returnMessage.substring(dhIndex + 1, returnMessage.length);
                            wrongMessage(showMessage, $("#" + pick$));
                        } else {
                            wrongMessage(returnMessage, null);
                        }
                    }
                }
            });
        }

        function wrongMessage(message, clear$) {
            if (clear$ != null) {
                clear$.val("");
                clear$.focus();
            }
            $("#login_form").removeClass('shake_effect');
            setTimeout(function () {
                $("#login_form").addClass('shake_effect')
            }, 1);
            $.message({
                message: message,
                type: 'error'
            });
        }
    </script>
</div>
</html>